<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

  <van-cell title="展示弹出层" is-link @click="showPopup" />

  <!-- 底部弹出 -->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
    <van-date-picker
      v-model="currentDate"
      title="选择日期"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </van-popup>

  <div @click="changeVuex">改变vuex</div>
</template>

<script setup>
import data from "@/util/test.js";

console.log(data);

const fieldValue = ref("");
const cascaderValue = ref("");

// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};

import { varietyQuery } from "@/api/index/index.js";

import { ref, onMounted } from "vue";

const getLIst = () => {
  varietyQuery({ varietyname: "隆玉1708" })
    .then((res) => {
      console.log(res);


      
    })
    .catch((err) => {
      console.log(err);
    });
};
onMounted(() => {
  getLIst();
});
import userInfo from "@/store/userInfo/userInfo.js";
const UserInfo = userInfo();
const changeVuex = () => {
  console.log(UserInfo.userData);
  setTimeout(() => {
    UserInfo.changeUserData("AAAAAAA");
    console.log(UserInfo.userData);
  }, 2000);
};

const username = ref("");
const password = ref("");
const onSubmit = (values) => {
  console.log("submit", values);
};

const show = ref(false);

const showPopup = () => {
  show.value = true;
};
const currentDate = ref(["2021", "01", "01"]);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 5, 1);
</script>

<style lang="less" scoped></style>
